<template>
  <div :style="`width: ${width}%;background-color:${color};height:${size}px;margin:${margin}`">
  </div>
</template>

<script>
export default {
  name: 'divider',
  props: {
    width: {
      type: Number,
      default: 100
    },
    size: {
      type: Number,
      default: 1
    },
    color: {
      type: String,
      default: "#f6f6f6"
    },
    align: {
      type: String,
      default: 'left'
    },
    marginTop: {
      type: Number,
      default: 20
    },
    marginBottom: {
      type: Number,
      default: 20
    },
  },
  computed: {
    margin () {
      if (this.align === 'center') {
        const marginLeft = (100 - this.width) / 2;
        return `${this.marginTop}px ${marginLeft}% ${this.marginBottom}px ${marginLeft}%`;
      } else if (this.align === 'right') {
        return `${this.marginTop}px 0% ${this.marginBottom}px ${100 - this.width}%`;
      }
      return `${this.marginTop}px 0 ${this.marginBottom}px 0`;
    }
  }
}
</script>
